<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>辩论赛制管理</title>
  <style>
    /* 添加一些基础样式 */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1em;
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
    }
    .form-group label {
      font-weight: bold;
    }
    .form-group input[type="number"] {
      padding: 0.5em;
      width: 100px;
    }
    .form-group select {
      padding: 0.5em;
      width: 100px;
    }
    button {
      padding: 0.5em 1em;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>辩论赛制管理</h1>
    <form id="debate-form">
      <div class="form-group">
        <label for="debate-format">选择赛制：</label>
        <select id="debate-format" name="debate-format">
          <option value="1v1">1V1</option>
          <option value="4v4">4V4</option>
        </select>
      </div>
      <div class="form-group">
        <label for="kaipian-time">开篇时间（秒）：</label>
        <input type="number" id="kaipian-time" name="kaipian-time" min="1" max="600" value="180">
      </div>
      <div class="form-group">
        <label for="gongbian-time">攻辩时间（秒）：</label>
        <input type="number" id="gongbian-time" name="gongbian-time" min="1" max="600" value="180">
      </div>
      <div class="form-group">
        <label for="ziyou-time">自由辩论时间（秒）：</label>
        <input type="number" id="ziyou-time" name="ziyou-time" min="1" max="600" value="180">
      </div>
      <div class="form-group">
        <label for="zongjie-time">总结时间（秒）：</label>
        <input type="number" id="zongjie-time" name="zongjie-time" min="1" max="600" value="180">
      </div>
      <button type="submit">保存设置</button>
    </form>
  </div>

  <script>
    document.getElementById('debate-form').addEventListener('submit', function(event) {
      event.preventDefault();
      const format = document.getElementById('debate-format').value;
      const kaipianTime = document.getElementById('kaipian-time').value;
      const gongbianTime = document.getElementById('gongbian-time').value;
      const ziyouTime = document.getElementById('ziyou-time').value;
      const zongjieTime = document.getElementById('zongjie-time').value;

      // 根据赛制设置页面
      if (format === '1v1') {
        // 只需要 kaipian, ziyou, zongjie
        setTimersFor1v1(kaipianTime, ziyouTime, zongjieTime);
      } else if (format === '4v4') {
        // 需要所有页面
        setTimersFor4v4(kaipianTime, gongbianTime, ziyouTime, zongjieTime);
      }

      alert('设置成功！');
    });

    function setTimersFor1v1(kaipianTime, ziyouTime, zongjieTime) {
      localStorage.setItem('kaipian-time', kaipianTime);
      localStorage.setItem('ziyou-time', ziyouTime);
      localStorage.setItem('zongjie-time', zongjieTime);
    }

    function setTimersFor4v4(kaipianTime, gongbianTime, ziyouTime, zongjieTime) {
      localStorage.setItem('kaipian-time', kaipianTime);
      localStorage.setItem('gongbian-time', gongbianTime);
      localStorage.setItem('ziyou-time', ziyouTime);
      localStorage.setItem('zongjie-time', zongjieTime);
    }
  </script>
</body>
</html>